<template>
	<div class="layout-pd">
		<el-card shadow="hover" header="作业" class="mt15">
			<el-card shadow="hover" header="作业要求" class="mt15">
			<el-row class="mb10" style="color: #808080   ; ">{{ state.tableData.param.homeworkscotent }}</el-row>
		    </el-card> 

			<div class="flex-warp">
				<Auth :value="'btn.add'">
					<div class="flex-warp-item">

						<div class="flex-warp-item-box">
							<el-table :data="state.tableData.data">
								<el-table-column prop="uploadtime" :formatter="getLocalTime" label="提交时间" width="300" />
								<el-table-column prop="name" label="作业命名" width="400" />
								<el-table-column   label="状态" width="300"  show-overflow-tooltip>
									<template #default="scope " >
										<div  v-for="item in state.tableData.param.datas"  >
										<el-tag type="error" v-if="item.id==scope.row.id &&item.state=='打回'"> {{ item.state }}</el-tag>
					                    <el-tag type="success" v-if="item.id==scope.row.id &&item.state=='合格'"> {{ item.state }}</el-tag> 
					                    <el-tag type="success" v-if="item.id==scope.row.id &&item.state=='审核通过'"> {{ item.state }}</el-tag> 
					                    <el-tag type="info"  v-if="item.id==scope.row.id &&item.state=='待审核'"> {{ item.state }}</el-tag> 
					                    <el-tag type="error" v-if="item.id==scope.row.id &&item.state=='审核未通过'"> {{ item.state }}</el-tag> 
				                              </div>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="300">
									<template #default="scope">
										<el-button text type="primary" @click="dowloadfile(scope.row.url)">
											下载</el-button>

											<el-tooltip class="item" effect="dark" content="双击删除"
                                                placement="top-start" >
												<el-button text type="primary" @click="deletescwript(scope.row)">删除</el-button>
                                            </el-tooltip>
										
									</template>
								</el-table-column>

							</el-table>
						</div>
					</div>
				</Auth>
			</div>

			<Auth :value="'btn.add'">
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<el-upload action="http://localhost:8080/bindfiles/insert" :on-success="handleSuccess" :data="uploadForm.data"
							:show-file-list="false" :headers=state.tableData.param.user :limit="3">
							<el-button type="primary">上传</el-button>
						</el-upload>
					</div>
				</div>
			</Auth>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funEchartsMap">
import { Session } from '/@/utils/storage';
import { ref, reactive, } from 'vue'
import { bind } from '/@/api/bindfiles/index';
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';




const state = reactive<SysRoleState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			user: JSON.parse(localStorage.getItem("user") || '{}'),
			homeworkscotent:'',
			file: "",
			name: "",
			images: "",
			search: "",
			pageNum: 1,
			pageSize: 10,
			datas:[]
		},

	},
});


//格式化后端返回来的时间
function getLocalTime(value: any) {
	let time = value.uploadtime[0] + '-' + value.uploadtime[1] + '-' + value.uploadtime[2] + ' ' + value.uploadtime[3] + ':' + value.uploadtime[4] + ':' + value.uploadtime[5]
	return time
}


//页面上获取作业内容
function gethomworks(){
	state.tableData.param.homeworkscotent=Session.get(hid)
	
}
//上传文件的时候传作业hid
const uploadForm = reactive({
    data: {
       hid:JSON.parse(localStorage.getItem('hid') || '{}')
    }
})

//上传文件后获取后端响应的值
const handleSuccess = async (res: any, file: any) => { 
	// action 上传时的回调
	if(res.code==500){
		ElMessage.error(res.msg);
	}else{
		state.tableData.data = res.data
	state.tableData.param.datas=res.data;
	ElMessage.success(`上传成功`);
	}
	
};


let hid = JSON.parse(localStorage.getItem('hid') || '{}');
//获取后端所有script的作业
const getAllscript = async (hid: object | undefined) => {
	bind().getAllScrip(hid).then(res => {
		state.tableData.data = res.data;
		state.tableData.param.datas=res.data;
       
	})
}


//删除数据库的文件和oss中的存的文件
const deletescwript = async (row?: any) => {
	bind().deleteUrl(row)
	getAllscript(hid)


}


//下载文件
const dowloadfile = async (url?: any) => {
	window.open(url)
}

//页面加载时去执行
onMounted(() => {
	getAllscript(hid)
	gethomworks()
})
</script>

<style scoped lang="scss">
.flex-warp {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	margin: 0 -5px;

	.flex-warp-item {
		padding: 5px;

		.flex-warp-item-box {
			width: 100%;
			height: 100%;
		}
	}
}

.error {
	height: 100%;

	.error-flex {
		margin: auto;
		display: flex;
		height: 450px;
		width: 1050px;

		.left {
			flex: 1;
			height: 100%;
			align-items: center;
			display: flex;

			.left-item {
				.left-item-animation {
					opacity: 0;
					animation-name: error-num;
					animation-duration: 0.5s;
					animation-fill-mode: forwards;
				}

				.left-item-num {
					color: var(--el-color-info);
					font-size: 55px;
				}

				.left-item-title {
					font-size: 20px;
					color: var(--el-text-color-primary);
					margin: 15px 0 5px 0;
					animation-delay: 0.1s;
				}

				.left-item-msg {
					color: var(--el-text-color-secondary);
					font-size: 12px;
					margin-bottom: 30px;
					animation-delay: 0.2s;
				}

				.left-item-btn {
					animation-delay: 0.2s;
				}
			}
		}

		.right {
			flex: 1;
			opacity: 0;
			animation-name: error-img;
			animation-duration: 2s;
			animation-fill-mode: forwards;

			img {
				width: 100%;
				height: 100%;
			}
		}


	}
}
</style>




<!-- <template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div ref="echartsMapRef" style="height: 100%"></div>
		</div>
	</div>
</template>

<script setup lang="ts" name="funEchartsMap">
import { reactive, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import { echartsMapList, echartsMapData } from './mock';

// 定义变量内容
const echartsMapRef = ref<RefType>('');
const state = reactive({
	echartsMap: '' as unknown,
	echartsMapList,
	echartsMapData,
});

// echartsMap 将坐标信息和对应物理量的值合在一起
const convertData = (data: EmptyObjectType[]) => {
	let res = [];
	for (let i = 0; i < data.length; i++) {
		let geoCoord = state.echartsMapData[data[i].name];
		if (geoCoord) {
			res.push({
				name: data[i].name,
				value: geoCoord.concat(data[i].value),
			});
		}
	}
	return res;
};
// 初始化 echartsMap
const initEchartsMap = () => {
	const myChart = echarts.init(echartsMapRef.value);
	const option = {
		tooltip: {
			trigger: 'item',
		},
		color: ['#9a60b4', '#ea7ccc'],
		bmap: {
			center: [104.114129, 37.550339],
			zoom: 5,
			roam: true,
			mapStyle: {},
		},
		series: [
			{
				name: 'pm2.5',
				type: 'scatter',
				coordinateSystem: 'bmap',
				data: convertData(state.echartsMapList),
				symbolSize: function (val: any) {
					return val[2] / 10;
				},
				encode: {
					value: 2,
				},
				label: {
					formatter: '{b}',
					position: 'right',
					show: false,
				},
				emphasis: {
					label: {
						show: true,
					},
				},
			},
			{
				name: 'Top 5',
				type: 'effectScatter',
				coordinateSystem: 'bmap',
				data: convertData(
					state.echartsMapList
						.sort(function (a: any, b: any) {
							return b.value - a.value;
						})
						.slice(0, 6)
				),
				symbolSize: function (val: any) {
					return val[2] / 10;
				},
				encode: {
					value: 2,
				},
				showEffectOn: 'render',
				rippleEffect: {
					brushType: 'stroke',
				},
				hoverAnimation: true,
				label: {
					formatter: '{b}',
					position: 'right',
					show: true,
				},
				itemStyle: {
					shadowBlur: 10,
					shadowColor: '#333',
				},
				zlevel: 1,
			},
		],
	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
};
// 页面加载时
onMounted(() => {
	initEchartsMap();
});
</script> -->
